<template>
  <div>
    <div class="mb-16px">
      <el-button icon="Back" @click="$router.back()">返回</el-button>
      <el-button @click="handleAddField">添加字段</el-button>
    </div>
    <div>
      <VueDraggable v-model="modelInfo.fieldList" handle=".handle" target="tbody" :animation="150" @end="onEnd">
        <el-table border :data="modelInfo.fieldList" v-loading="loading">
          <el-table-column label="" width="60" prop="" align="center">
            <template #default>
              <el-icon class="handle cursor-pointer">
                <Rank />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column label="字段标识" width="180" prop="title">
            <template #default="{ row }">
              <div>{{ row.name }}</div>
            </template>
          </el-table-column>
          <el-table-column label="字段名称" width="180" prop="title">
            <template #default="{ row }">
              <div>{{ row.title }}<span v-if="row.required" class="color-red">*</span></div>
            </template>
          </el-table-column>
          <el-table-column label="字段类型" width="280" prop="type" align="center"> </el-table-column>
          <el-table-column label="是否必填" width="180" prop="required" align="center">
            <template #default="{ row }">
              <div>{{ row.required ? '是' : '否' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="默认值" width="180" prop="defaultValue" align="center">
            <template #default="{ row }">
              <div>{{ row.defaultValue || '--' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="字段描述" prop="remark">
            <template #default="{ row }">
              {{ row.remark || "--" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template #default="{ $index, row }">
              <el-button icon="Edit" @click="handleEdit($index, row)"></el-button>
              <el-button type="danger" icon="Delete" @click="handleDelete($index, row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </VueDraggable>
    </div>
    <add-field-form ref="addFieldFormRef" @submit-field="submitField"></add-field-form>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, useTemplateRef } from 'vue'
import { useRoute } from 'vue-router'
import { VueDraggable, type SortableEvent } from 'vue-draggable-plus'
import { ElMessage } from 'element-plus'
import { queryModelById, updateModel, queryModelView, updateView } from '@/api/model'

import addFieldForm from './add-field-form.vue'

const route = useRoute()

const modelInfo = ref<any>({ fieldList: [] })
const loading = ref(false)

const viewInfo = ref<any>({})

const editIndex = ref(0)

const addFieldRef = useTemplateRef('addFieldFormRef')

const handleDelete = (index: number, row: any) => {
  modelInfo.value.fieldList.splice(index, 1);
  const viewIndex = viewInfo.value.columns.findIndex((item: any) => item.name === row.name)
  viewInfo.value.columns.splice(viewIndex, 1)
  updateViewInfo()
  updateModelInfo()
}
const getModelInfo = async () => {
  loading.value = true
  const res: any = await queryModelById(route.params.mid as string)
  if (res.code === 0) {
    modelInfo.value = { ...res.data }
  }
  loading.value = false
}

const updateModelInfo = async () => {
  loading.value = true
  const res: any = await updateModel({ ...modelInfo.value })
  if (res.code === 0) {
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
  }
  loading.value = false
}

const updateViewInfo = async () => {
  loading.value = true
  const res: any = await updateView({ ...viewInfo.value })
  if (res.code === 0) {
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
  }
  loading.value = false
}

const submitField = (data: any, type: string) => {
  if (type === 'create') {
    modelInfo.value.fieldList.push(data)
    viewInfo.value.columns.push({
      name: data.name,
      type: data.type,
      title: data.title,
      width: 100,
      display: true
    })
    updateModelInfo()
    updateViewInfo()
  } else {
    modelInfo.value.fieldList.splice(editIndex.value, 1, data)
    updateModelInfo()
  }
}

const onEnd = (event: SortableEvent) => {
  updateModelInfo()
}

const handleAddField = () => {
  addFieldRef.value?.openAddFieldDialog('create')
}

const handleEdit = (index: number, row: any) => {
  editIndex.value = index
  addFieldRef.value?.openAddFieldDialog('edit', JSON.parse(JSON.stringify(row)))
}

const getViewInfo = async () => {
  const res: any = await queryModelView({ modelIdentifier: route.params.mid as string, viewIdentifier: 'list' })
  if (res.code === 0) {
    viewInfo.value = { ...res.data }
  }
}

onMounted(() => {
  getModelInfo()
  getViewInfo()
})
</script>
<style scoped></style>
